/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-08 10:28:17
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 15:55:18
 */
import React from 'react';

import { Modal, Button, Space,Select,Form,Upload, message,Radio,Tabs,Tooltip   } from 'antd';

import { QuestionCircleFilled } from '@ant-design/icons';

import FooterButton from '../footer/FooterButton';

const { TabPane } = Tabs;

const { Option } = Select;

const layout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 20,
    },
  };

  // 下拉选择框 onChang 事件
  function handleChange(value) {
    console.log(`selected ${value}`);
  }

const GoodsImport = (props) => {
    
    const onFinish = (values) => {
        console.log(values);
      };

    const [form] = Form.useForm();
    
    const propsFile = {
        beforeUpload: file => {
          const isFile = file.type === '.xls';
          if (!isFile) {
            message.error(`${file.name} 不是一个 .xls 文件`);
          }
          return isFile || Upload.LIST_IGNORE;
        },
        onChange: info => {
          console.log(info.fileList);
        },
      };

      // 文件上传
      const normFile = (e) => {  //如果是typescript, 那么参数写成 e: any  
        console.log('Upload event:', e);  
        if (Array.isArray(e)) {  
              return e;
              }  
              return e && e.fileList;
            };
    return (
        <div>
             <Modal 
             footer={[
                <FooterButton 
                key='btnBox'
                btn1='开始导入' 
                btn2='关闭' 
                clickBtn1={props.handleOk}
                clickBtn2={props.handleCancel}
                 />
                 ]} 
             centered bodyStyle={{padding:"5px"}} 
             width={800} 
             maskClosable={false} 
             mask={false} 
             title={[<div key="title" style={{color:"red"}}>{props.title}</div>]} 
             visible={props.visible} 
             onCancel={props.handleCancel}
             >
                 <div style={{height:"50px",lineHeight:"50px",textAlign:"center",fontWeight:"bold",background:"#EFF0EF"}}>Excel数据导入</div>
                 <div style={{height:"50px",lineHeight:"50px",textAlign:"center",fontWeight:"bold"}}>
                     <Space>
                     <span style={{color:"red",fontWeight:"bold"}}>特别提示: 请先</span>
                     <Button type='danger'>下载客户导入模板</Button>
                     <span style={{color:"red",fontWeight:"bold"}}>并填写Excel数据</span>
                     </Space>
                 </div>
                 <Form 
                 size='small' 
                 {...layout} 
                 form={form} 
                 name="control-hooks" 
                 onFinish={onFinish} 
                 initialValues={{
                     sheet:'sheet1',
                     radioGroup:"否",
                 }}
                 >
                      <Form.Item
                        label="上传文件"
                        rules={[
                          {
                            // required: true,
                          },
                        ]}
                      >
                        <Space>
                            <Form.Item name="file" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                                <Upload {...propsFile} accept='.xls' showUploadList={false} >
                                  <Button type='primary'>选择文件</Button>
                                </Upload>
                            </Form.Item>

                            <Form.Item noStyle>
                            <QuestionCircleFilled />只允许上传 <span style={{color:"red"}}>.xls</span> 格式
                            </Form.Item>
                            
                            <Form.Item noStyle>
                                <Tabs defaultActiveKey="1" type="card" style={{height:"30px"}}>
                                  <TabPane tab="sheet1" key="1">
                                  </TabPane>
                                  <TabPane tab="sheet2" key="2">
                                  </TabPane>
                                  <TabPane tab="sheet3" key="3">
                                  </TabPane>
                                </Tabs>
                            </Form.Item>
                        </Space>
                      </Form.Item>

                      <Form.Item
                        
                        label="Excel数据表"
                        rules={[
                          {
                            // required: true,
                          },
                        ]}
                      >
                        <Space>
                           <Form.Item name="sheet"  noStyle>
                                <Select
                                  onChange={handleChange}
                                  style={{ width: 88 }}
                                >
                                  <Option value="sheet1">sheet1</Option>
                                  <Option value="sheet2">sheet2</Option>
                                  <Option value="sheet3">sheet3</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item noStyle>
                                <QuestionCircleFilled />位置:Excel文件左下角
                            </Form.Item>
                        </Space>
                      </Form.Item>
                      <Form.Item
                        label='商品名称去重'
                      >
                        <Form.Item name='radioGroup' noStyle>
                            <Radio.Group>
                               <Radio value="是">是</Radio>
                               <Radio value="否">否</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item noStyle>
                            <Tooltip placement="topLeft" title="商品名称重复的信息将会删除">
                                <QuestionCircleFilled />商品名称重复的信息将会删除
                            </Tooltip>
                        </Form.Item>
                        
                      </Form.Item>

                      <Form.Item label='注意事项'>
                        <Form.Item>
                        1、单元格中 <span style={{color:"red"}}>表头字段顺序</span> 不能改变 ，字段不能删除；
                        </Form.Item>
                        <Form.Item>
                        2、单元格中 <span style={{color:"red"}}>商品名称</span> 为必填；
                        </Form.Item>
                        <Form.Item>
                        3、单元格中 <span style={{color:"red"}}>255 字节</span> ，内容过多会被截取；
                        </Form.Item>
                        <Form.Item>
                        4、建议每次导入数据量在  <span style={{color:"red"}}>5000 条</span> 以内；
                        </Form.Item>
                      </Form.Item>
                 </Form>
                <div style={{height:"50px",lineHeight:"50px",textAlign:"center",fontWeight:"bold"}}><Button type='dashed' danger>》》导入报错解决办法《《 </Button></div>
            </Modal>
        </div>
    );
}

export default GoodsImport;
